<template>
    <div class="app-container">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <span>用户管理</span>
            </div>

            <!-- 查询条件-->
            <el-form :inline="true" :model="selectParam" label-width="100px" size="small" class="demo-form-inline">
                <el-form-item label="姓 名:">
                    <el-input style="width: 290px" v-model.trim="selectParam.userName" placeholder="请输入姓名" maxLength="1000"></el-input>
                </el-form-item>
                <el-form-item label="手 机 号:">
                    <el-input
                            style="width: 290px"
                            oninput="value=value.replace(/[^\d]/g,'')"
                            v-model="selectParam.mobile"
                            maxLength='11'
                            placeholder="请输入手机号">
                    </el-input>
                </el-form-item>
                <el-form-item label="部 门:">
                    <el-select  style="width: 290px" v-model="selectParam.deptId" placeholder="请选择部门">
                        <el-option  label="全部" value=""></el-option>
                        <el-option v-for="(item,index) in depts" :label="item.deptName" :key="index" :value="item.deptId" style="width:270px"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="角 色:">
                    <el-select  style="width: 290px" v-model="selectParam.roleId">
                        <el-option  label="全部" :value="null"></el-option>
                        <el-option v-for="(item,index) in roles" :label="item.groupName+' — '+item.roleName" :key="index" :value="item.roleId" style="width: 250px"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="是否管理员:">
                    <el-select  style="width: 290px" v-model="selectParam.isAdmin">
                        <el-option  label="全部" :value="null"></el-option>
                        <el-option  label="是" value="true"></el-option>
                        <el-option  label="否" value="false"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="在职状态:">
                    <el-select  style="width: 290px" v-model="selectParam.isResign">
                        <el-option  label="全部" :value="null"></el-option>
                        <el-option  label="在职" value="true"></el-option>
                        <el-option  label="离职" value="false"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="入职日期:">
                    <el-date-picker
                            type="date"
                            placeholder="开始"
                            v-model="selectParam.hiredDateStart"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            style="width: 140px">
                    </el-date-picker>
                    -
                    <el-date-picker
                            type="date"
                            placeholder="结束"
                            v-model="selectParam.hiredDateEnd"
                            value-format="yyyy-MM-dd"
                            format="yyyy-MM-dd"
                            style="width: 140px">
                    </el-date-picker>
                </el-form-item>

                <el-form-item style="float: right;margin-right: 30px">
                        <el-button type="primary" @click="selectParamOnSubmit">查询</el-button>
                        <el-button  @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>


            <!-- 列表-->
            <el-table
                    border
                    size="small"
                    :data="users"
                    :header-cell-style="tableHeaderStyle"
                    style="width: 100%">
                <el-table-column
                        fixed
                        type="index"
                        label="No."
                        header-align="center"
                        align="center"
                        width="50">
                        <template slot-scope="scope">
                            {{ (pageCurrent - 1) * pageSize + scope.$index + 1 }}
                        </template>
                </el-table-column>
                <el-table-column
                        fixed
                        prop="userName"
                        label="姓名"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="mobile"
                        label="手机号"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="deptNames"
                        label="部门"
                        header-align="center"
                        align="left"
                        :show-overflow-tooltip="true"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="position"
                        label="职位"
                        header-align="center"
                        align="center"
                        :show-overflow-tooltip="true"
                        width="200">
                </el-table-column>
                <el-table-column
                        prop="roleNames"
                        label="角色"
                        header-align="center"
                        align="left"
                        :show-overflow-tooltip="true"
                        min-width="250">
                </el-table-column>
                <el-table-column
                        prop="hiredDate"
                        label="入职日期"
                        header-align="center"
                        align="center"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="isResign"
                        label="在职状态"
                        header-align="center"
                        align="center"
                        width="120">
                        <template slot-scope="scope">
                            <el-tag v-show="scope.row.isResign == 1" size="small">在职</el-tag>
                            <el-tag v-show="scope.row.isResign == 0" size="small" type="danger">离职</el-tag>
                        </template>
                </el-table-column>
                <el-table-column
                    prop="employeeType"
                    label="员工类型"
                    header-align="center"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                    prop="employeeStatus"
                    label="员工状态"
                    header-align="center"
                    align="center"
                    width="120">
                </el-table-column>
                <el-table-column
                        prop="isAdmin"
                        label="是否管理员"
                        header-align="center"
                        align="center"
                        width="150">
                    <template slot-scope="scope">{{scope.row.isAdmin == true ? '是': '否'}}</template>
                </el-table-column>

            </el-table>

            <!-- 分页-->
            <div style="text-align:right;margin: 15px">
                <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :current-page="pageCurrent"
                        @current-change="changePageCurrent"
                        :total="pageTotal">
                </el-pagination>
            </div>

        </el-card>
    </div>
</template>


<script>
    import {http_user_list,http_dropdownBox_depts,http_dropdownBox_roles} from '@/api/user'
    import {tableHeaderStyle} from '@/utils/constant'
    import {Message} from 'element-ui'

    export default {
        data() {
            return {
                tableHeaderStyle: tableHeaderStyle,
                selectParam: {
                    userName: null,
                    mobile: null,
                    roleId: null,
                    deptId: null,
                    isResign: null,
                    isAdmin: null,
                    isSenior: null,
                    hiredDateStart: null,
                    hiredDateEnd: null,
                    oldHiredDateStart: null,
                    oldHiredDateEnd: null,
                },
                selectParamVersion: 0,

                users: [],
                depts: [],
                roles: [],
                pageTotal: 0,
                pageSize: 10,
                pageCurrent: 1,


            }
        },
        methods:{
            getUserList(){
                if (this.selectParamVersion > 0){
                    this.pageCurrent = 1
                }
                http_user_list(this.pageCurrent,this.pageSize,this.selectParam).then(result=>{
                    const {data} = result
                    this.users = data.records
                    this.pageTotal = data.total
                    this.pageSize = data.size
                    this.pageCurrent = data.current
                    this.selectParamVersion = 0
                })
            },
            getDropdownBoxDeptList(){
                http_dropdownBox_depts().then(result=>{
                    const {data} = result
                    this.depts = data
                })
            },
            getDropdownBoxRoleList(){
                http_dropdownBox_roles().then(result=>{
                    const {data} = result
                    this.roles = data
                })
            },
            changePageCurrent(value){
                this.pageCurrent = value
                this.getUserList()
            },
            selectParamOnSubmit(){
                this.getUserList()
            },
            resetForm(formName) {
                this.selectParam = {
                    userName: null,
                        mobile: null,
                        roleId: null,
                        deptId: null,
                        isResign: null,
                        isAdmin: null,
                        isSenior: null,
                        hiredDateStart: null,
                        hiredDateEnd: null,
                }
                this.getUserList()
            }
        },
        created() {
            this.getUserList()
            this.getDropdownBoxDeptList()
            this.getDropdownBoxRoleList()
        },
        watch: {
            selectParam: {
                handler(selectParam,oldSelectParam){
                    this.selectParamVersion = 1

                    if (selectParam.hiredDateStart && selectParam.hiredDateEnd) {
                        let x= 0
                        if (selectParam.hiredDateStart != selectParam.oldHiredDateStart) x = 1
                        if (selectParam.hiredDateEnd != selectParam.oldHiredDateEnd ) x = 2
                        if ( x > 0 && new Date(selectParam.hiredDateStart).getTime() > new Date(selectParam.hiredDateEnd).getTime()) {
                            Message.warning("打卡日期：开始不能大于结束")
                            if (x == 1) selectParam.hiredDateStart = null
                            if (x == 2) selectParam.hiredDateEnd = null
                        }
                    }
                    selectParam.oldHiredDateStart = selectParam.hiredDateStart
                    selectParam.oldHiredDateEnd = selectParam.hiredDateEnd
                },
                deep:true
            }
        }


    }
</script>

<style>
    .text {
        font-size: 14px;
    }

    .item {
        margin-bottom: 18px;
    }

    .clearfix:before,
    .clearfix:after {
        display: table;
        content: "";
    }
    .clearfix:after {
        clear: both
    }

    .box-card {
        width: 100%;
    }
    .el-table th.gutter {
        display: table-cell !important
    }


</style>
